<template>
  <div>
    <v-row class="mb-2">
      <v-col :md="6">
        <v-form @submit.prevent="searchCourse">
          <v-text-field
            v-model="search"
            @change="searchCourse"
            label="请输入搜索内容"
            dense
            flat
            hide-details
            rounded
            solo-inverted
          ></v-text-field>
        </v-form>
      </v-col>
    </v-row>
    <CourseList title="热门课程" v-if="courses" :courses="courses"/>
    <v-sheet
      v-else
      :color="`grey ${theme.isDark ? 'darken-2' : 'lighten-4'}`"
      class="pa-3"
    >
      <v-skeleton-loader
        class="mx-auto"
        max-width="300"
        type="card"
      ></v-skeleton-loader>
    </v-sheet>
  </div>
</template>

<script>
import LikeBtn from '~/components/LikeBtn.vue'
import CourseList from '~/components/CourseList.vue'
export default {
  async asyncData({$axios, error}) {
    try {
      const res = await $axios.$get('courses', {
        params: {
          query: {
            populate: 'categories',
          },
        },
      })
      return {
        courses: res.data.data,
      }
    } catch (err) {
      error({
        statusCode: 403,
      })
    }
  },
  components: {LikeBtn, CourseList},
  data() {
    return {
      search: '',
    }
  },
  methods: {
    async searchCourse() {
      const res = await this.$axios.$get('courses', {
        params: {
          query: {
            populate: 'categories',
            where: {
              name: {
                $regex: this.search,
              },
            },
          },
        },
      })
      this.courses = res.data.data
    },
  },
}
</script>

<style scoped lang="scss"></style>
